<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
     * {    margin: 0;padding: 0;}
        html,body {    width: 100%;height: 100%;}
        #box { width: 100%; height: 100%; overflow: hidden; }
        .ball { width: 100%; height: 500px; }
        #scroll {
            width: 9px; height: 96%;
            position: fixed; top: 2%; right: 5px;
            border-radius: 5px; background-color: rgba(235, 233, 233, 0.5);
            z-index: 9998; 
        }
        #scrollbar {
            position: absolute; z-index: 9999;
            width: 9px; height: 20px;
            border-radius: 5px;
            left: 0; top: 0; background-color: #383838;
        }

</style>

<body style="overflow:hidden">
    <div id="box">
        <div id="content">
            <p class="ball" style="background:#d9004d">1234</p>
            <p class="ball" style="background:#fdbcc1">1234</p>
            <p class="ball"  style="background:#bee0fb">1234</p>
            <p class="ball"  style="background:#f2dec7">1234</p>
            <p class="ball"  style="background:#8dd4ed">1234</p>
            <p class="ball"  style="background:#d8306b">1234</p>
        </div>
    </div>
    <div id="scroll">
        <div id="scrollbar"></div>
    </div>
    比例关系:
    可视窗口的高度/页面总高度  == 滚动条按钮高度 / 滚动条高度
    页面滚动距离/ 页面总高度 == 滚动按钮的top  / 滚动条（偏移量）

</body>
<script src="../drag.js"></script>
<script>
    var delta = 50; // 每次的偏移量，迭代量
        var box = document.getElementById("box");
        var scroll = document.getElementById("scroll");
        var content = document.getElementById("content");
        var bar = document.getElementById("scrollbar");
        box.addEventListener("mousewhell",function(e){
            if(e.detail <0){
                box.scrollTop -=delta;
            }else{
                box.scrollTop +=delta;
            }
        })
        box.addEventListener("DOMMouseScroll",function (e) {  
            if(e.detail <0){
                box.scrollTop -=delta;
            }else{
                box.scrollTop +=delta;
            }
            var tops =  box.scrollTop / content.offsetHeight * scroll.offsetHeight ;
        bar.style.top = tops + "px";
       
        })
        // 监听页面窗口调整事件
        window.onresize = function(){
		   
           bar.style.height =   scroll.offsetHeight * window.innerHeight   /content.offsetHeight +"px";

    }
    draggable(bar,{x:false})
    bar.style.height =   scroll.offsetHeight * window.innerHeight   /content.offsetHeight +"px";
    
        
    </script>
</html>